import React from "react";
import styles from "../css/city.module.css";
import { DeleteOutline } from "antd-mobile-icons";
import { Tag, Dialog } from "antd-mobile";
import { useSelector, useDispatch } from "react-redux";
import { useParams } from "react-router-dom";
import { clearHistory, saveHistory } from "../../../store/slice/ticketSlice";

function SearchHistory(props) {
  let dis = useDispatch();
  let params = useParams();
  let history = useSelector((store) => store.ticket.history);
  const clear = () => {
    Dialog.confirm({
      content: "确认清空搜索历史吗？",
      onConfirm() {
        dis(clearHistory());
      },
    });
  };
  return (
    <div
      style={{ display: history.length == 0 ? "none" : "block" }}
      className={styles.historybox}
    >
      <div className={styles.history}>
        <span className={styles.title}>搜索历史</span>
        <DeleteOutline fontSize={20} onClick={clear} />
      </div>
      <div className={styles.tags}>
        {history.map((item, index) => {
          return (
            <Tag
              key={index}
              onClick={() => {
                //跳转首页
                props.saveCity(params.type, item);
                dis(saveHistory(item));
              }}
              className={styles.tag}
            >
              {item}
            </Tag>
          );
        })}
      </div>
    </div>
  );
}

export default SearchHistory;
